<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="120px">
      <el-form-item label="学院" prop="deptId">
        <el-select @change="changeDept" v-model="queryParams.deptId" placeholder="请选择学院" filterable clearable>
          <el-option v-for="(v, i) in deptList" :key="i" :label="v.label" :value="v.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专业" prop="majorId">
        <el-select @change="changeMajor" v-model="queryParams.majorId" placeholder="请先选择学院再选择专业" filterable clearable>
          <el-option v-for="(v, i) in majorList" :key="i" :label="v.majorName" :value="v.majorId"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级" prop="classId">
        <el-select v-model="queryParams.classId" placeholder="请先选择专业再选择班级" filterable clearable>
          <el-option v-for="(v, i) in classList" :key="i" :label="v.className" :value="v.classId"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学生姓名" prop="stuName">
        <el-input v-model="queryParams.stuName" placeholder="请输入学生姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="学号" prop="stuNo">
        <el-input v-model="queryParams.stuNo" placeholder="请输入学号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="审核状态" prop="applyStatus">
        <el-select size="mini" v-model="queryParams.applyStatus" placeholder="审核状态" clearable>
          <el-option v-for="(v, i) in applyStatus" :key="i" :label="v.label" :value="v.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否转账" prop="isSendMoney">
        <el-select size="mini" v-model="queryParams.isSendMoney" placeholder="是否转账" clearable>
          <el-option :label="'是'" :value="'是'" />
          <el-option :label="'否'" :value="'否'" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-button type="success" plain icon="el-icon-edit" size="mini" @click="editManySendMoney">批量标记为已转账</el-button>

      <el-tooltip class="item" effect="dark" content="此操作将把所有学工审核通过并且转账状态为否的记录标记为已转账" placement="top">
        <el-button type="success" plain icon="el-icon-edit" size="mini" @click="editAllSendMoney">一键标记为已转账</el-button>
      </el-tooltip>
    </el-row>

    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="#" align="center" prop="id" />
      <el-table-column label="学号" align="center" prop="stuNo" />
      <el-table-column label="提交人" align="center" prop="stuName" />
      <el-table-column label="班级" align="center" prop="className" />
      <el-table-column label="学年" align="center" prop="stuYearName" />

      <el-table-column label="辅导员姓名" align="center" prop="fdyName" />
      <el-table-column label="学生人数" align="center" prop="classCount" />

      <el-table-column label="提交时间" align="center" prop="applyTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.applyTime) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="申请状态" align="center" width="120px">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.audius_detail_type" :value="scope.row.applyStatus" />
        </template>
      </el-table-column>
      <el-table-column label="是否转账" align="center" prop="isSendMoney" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isSendMoney == '否' && scope.row.applyStatus == '6'" size="mini" type="text" icon="el-icon-edit" @click="editSendMoney(scope.row, '是')">标记为已转账</el-button>
          <el-button v-if="scope.row.isSendMoney == '是' && scope.row.applyStatus == '6'" size="mini" type="text" icon="el-icon-close" @click="editSendMoney(scope.row, '否')">标记为未转账</el-button>

          <el-button size="mini" type="text" icon="el-icon-view" @click="lookVClick(scope.row)">查看</el-button>
          <el-button size="mini" type="text" icon="el-icon-plus" @click="addRemark(scope.row)">添加备注</el-button>

          <el-button size="mini" type="text" icon="el-icon-edit" @click="editStatusVClick(scope.row)">修改审核状态</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <el-dialog title="查看" :visible.sync="lookV" width="70rem">
      <el-form label-width="120px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item class="look-form-item" label="申请人">
              <el-input readonly v-model="lookForm.stuName"></el-input>
            </el-form-item>
            <el-form-item class="look-form-item" label="班级">
              <el-input readonly v-model="lookForm.className"></el-input>
            </el-form-item>
            <el-form-item class="look-form-item" label="辅导员">
              <el-input readonly v-model="lookForm.fdyName"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="班级人数">
              <el-input readonly v-model="lookForm.classCount"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="身份证号">
              <el-input readonly v-model="lookForm.idCard"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="农行卡号">
              <el-input readonly v-model="lookForm.bankCard"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="开户行">
              <el-input readonly v-model="lookForm.bankAddr"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="所获奖励">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }" v-model="lookForm.goodHis"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="主要事迹">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }" v-model="lookForm.mainHis"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="佐证材料">
              <Affix @input="handleAffix" v-model="lookForm.testimonyMaterials"></Affix>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="!isEmpty(lookForm.isSendMoney)" class="look-form-item" label="是否转账">
              <el-input readonly v-model="lookForm.isSendMoney"></el-input>
            </el-form-item>

            <el-form-item v-if="!isEmpty(lookForm.sendMoneyTime)" class="look-form-item" label="转账时间">
              <el-input readonly v-model="lookForm.sendMoneyTime"></el-input>
            </el-form-item>

            <el-form-item v-if="!isEmpty(lookForm.remark)" class="look-form-item" label="备注">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }" v-model="lookForm.remark"></el-input>
            </el-form-item>

            <el-form-item v-if="!isEmpty(lookForm.fdyCmt)" class="look-form-item" label="辅导员意见">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }" v-model="lookForm.fdyCmt"></el-input>
            </el-form-item>
            <el-form-item v-if="!isEmpty(lookForm.xwCmt)" class="look-form-item" label="学院意见">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }" v-model="lookForm.xwCmt"></el-input>
            </el-form-item>
            <el-form-item v-if="!isEmpty(lookForm.jwcCmt)" class="look-form-item" label="学工意见">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }" v-model="lookForm.jwcCmt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <el-dialog title="审核" :visible.sync="auditV">
      <el-form label-width="120px" size="mini">
        <el-form-item label="您的审核意见">
          <el-row>
            <el-col :span="12">
              <el-select @change="changeAuditStatus" v-model="auditForm.applyStatus">
                <el-option label="拒绝" value="11"></el-option>
                <el-option label="同意" value="6"></el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-button @click="editStatus" size="mini">修改状态</el-button>
            </el-col>
          </el-row>
          <el-input placeholder="请输入审核意见" type="textarea" :maxlength="1000" :autosize="{ minRows: 10, maxRows: 10 }" class="auditForm-input" v-model="auditForm.jwcCmt"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { fullLoading, isEmpty } from '@/api/helpFunc'

import { addRemark, editAllSendMoney, editManySendMoney, editSendMoney, editStatus, listJwcAll } from '@/api/stuCQS/good-class/newClassGoodApply'

import { listEnableYear as listYear } from '@/api/stuCQS/basedata/year'

import { listClass } from '@/api/stuCQS/basedata/class'
import { listMajors } from '@/api/stuCQS/basedata/majors'
import { getDeptName } from '@/api/system/dept'

import { goodClassApplyStatus as applyStatus } from '@/api/stuCQS/good/audit'

export default {
  name: 'good-class-stu',
  dicts: ['audius_detail_type'],
  data() {
    return {
      applyStatus,
      isEmpty,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        classId: null,
        majorId: null,
        deptId: null,
      },
      total: 0,
      loading: false,
      tableData: [],

      lookV: false,
      lookForm: {},

      year_list: [],

      applyIds: [],

      auditForm: {},
      auditV: false,
    }
  },
  created() {
    this.listDept()
    this.getList()
    this.listYear()
  },
  methods: {
    async editStatus() {
      let sdata = {
        ...this.auditForm,
      }
      let loading = fullLoading(this)
      let res = await editStatus(sdata)
      loading.close()
      if (res.code == 200) {
        this.auditV = false
        this.$message.success(res.msg)
        this.getList()
      }
    },
    changeAuditStatus(v) {
      switch (v) {
        case '6':
          this.auditForm.jwcCmt = '同意申请。'
          break
        case '11':
          this.auditForm.jwcCmt = '拒绝申请。'
          break
        default:
          this.auditForm.jwcCmt = ''
          break
      }
    },
    editStatusVClick(val) {
      this.auditForm = { ...val }
      this.auditV = true
    },
    addRemark(val) {
      this.$prompt('请输入备注', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '不能为空',
      })
        .then(async ({ value }) => {
          let sdata = {
            id: val.id,
            remark: value,
          }
          let loading = fullLoading(this)
          let res = await addRemark(sdata)
          loading.close()
          if (res.code == 200) {
            this.$message.success(res.msg)
            this.getList()
          }
        })
        .catch(() => {})
    },
    editManySendMoney() {
      let sdata = [...this.applyIds]
      if (isEmpty(sdata)) {
        this.$message.info('请勾选需要标记的项目')
        return
      }
      this.$confirm('您确定要批量标记嘛?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let loading = fullLoading(this)
          let res = await editManySendMoney(sdata)
          loading.close()
          if (res.code == 200) {
            this.$message.success(res.msg)
            this.getList()
          }
        })
        .catch(() => {})
    },
    handleSelectionChange(selection) {
      this.applyIds = selection.map((item) => item.id)
    },
    editAllSendMoney() {
      this.$confirm('您确定要一键标记嘛?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let loading = fullLoading(this)
          let res = await editAllSendMoney()
          loading.close()
          if (res.code == 200) {
            this.$message.success(res.msg)
            this.getList()
          }
        })
        .catch(() => {})
    },

    async editSendMoney(val, status) {
      let sdata = {
        id: val.id,
        isSendMoney: status,
      }
      let loading = fullLoading(this)
      let res = await editSendMoney(sdata)
      loading.close()
      if (res.code == 200) {
        this.$message.success(res.msg)
        this.getList()
      }
    },

    handleExport() {
      this.download(
        'comprehensive/newClassGoodApply/exportJwc',
        {
          ...this.queryParams,
        },
        `先进班集体_${new Date().getTime()}.xlsx`
      )
    },
    async changeMajor() {
      this.queryParams.classId = null
      this.classList = []
      if (!isEmpty(this.queryParams.majorId)) {
        let sdata = {
          pageNum: 1,
          pageSize: 1000,
          majorId: this.queryParams.majorId,
        }
        let res = await listClass(sdata)
        this.classList = [...res.rows]
      }
    },
    async changeDept() {
      this.queryParams.majorId = null
      this.queryParams.classId = null
      this.majorList = []
      this.classList = []
      if (!isEmpty(this.queryParams.deptId)) {
        let sdata = {
          collegeId: this.queryParams.deptId,
          pageNum: 1,
          pageSize: 1000,
        }
        let res = await listMajors(sdata)
        this.majorList = [...res.rows]
      }
    },
    async listDept() {
      let res = await getDeptName()
      this.deptList = [...res.data]
    },

    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },

    lookVClick(val) {
      this.lookForm = { ...val }
      this.lookV = true
    },

    async listYear() {
      let res = await listYear()
      if (res.code == 200) {
        this.year_list = [...res.rows]
      }
    },

    async getList() {
      this.loading = true
      let res = await listJwcAll(this.queryParams)
      this.loading = false
      if (res.code == 200) {
        this.tableData = [...res.rows]
        this.total = res.total
      }
    },
    handleAffix(affixId) {
      this.lookForm.testimonyMaterials = affixId
    },
  },
}
</script>
<style scoped>
.look-form-item {
  margin-bottom: 1px;
}
</style>
